<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS positioned 定位类型</title>
</head>

<body>
  <style>
    /* 静态定位，默认属性行为 */
    /* .positioned {
      position: static;
      background: yellow;
      border: 1px solid black ;
    } */


    /* 相对定位 */
    /* .positioned {
      display: inline-block; 
      width: auto;
      height: auto;
      background: red;
      color: white;
      border: 1px solid black ;
    }
    .demo {
      position: relative;
      top: 10px;
      left: 200px;
      background: blue;
    } */


    /* 绝对定位 */
    /* * {
      box-sizing: border-box;
    }

    body {
      width: 500px;
      margin: 0 auto;
    }

    p {
      background: aqua;
      border: 3px solid blue;
      padding: 10px;
      margin: 10px;
    }
    
    .card {
      display: inline-block;
      position: absolute;
      text-align: center;
      height: 170px;
      width: 150px;
      padding: 10px;
      top: 33%;
      right: 10px;
      border: 2px dotted sandybrown;
    } */


    /* 定位上下文 */
    /* body {
      width: 500px;
      margin: 50px auto;
      position: relative;
    }
    p {
      background: aqua;
      border: 3px solid blue;
      padding: 10px;
      margin: 10px;
    }
    .card {
      display: inline-block;
      position: absolute;
      text-align: center;
      height: 170px;
      width: 150px;
      padding: 10px;
      top: 33%;
      right: 10px;
      border: 2px dotted sandybrown;
    } */

    /* 5.固定定位 */
    /* body {
      width: 500px;
      height: 1400px;
      margin: 0 auto;
    }
    p {
      background: aqua;
      border: 3px solid blue;
      padding: 10px;
      margin: 20px;
    }
    .card {
      position: fixed;
      text-align: center;
      height: 150px;
      width: 150px;
      padding: 5px;
      bottom: 0px;
      right: 0px;
      border: 2px dotted sandybrown;
    } */

    /* 6.sticky定位 */

    body {
      margin: 0;
      padding: 0;
    }

    p {
      background: aqua;
      border: 1px solid rgb(117, 165, 231);
      padding: 10px;
      margin: 20px;
      text-align: center;
    }

    .links {
      margin: 1em 0;
      position: sticky;
      top: 0;
      left: 0;
      background-color: rgb(79, 153, 238);
      color: black;
    }
  </style>
  <h3>作者介绍</h3>

  <p class="positioned links">导航栏: <a href="https://blog.weiyigeek.top" target="_blank">https://www.weiyigeek.top</a></p>

  <p class="positioned">WeiyiGeek: 本人现从事系统网络安全运维等工作, 毕业实习前做过等保安全服务等相关工作，从上面兴趣爱好可以看出,
    我是一名计算机技术、信息安全爱好者以及物联网技术开发相关。对于计算机相关的技术以及网络安全技术知识有着浓厚的学习兴趣，喜欢认识、结交各位大佬进行网络安全攻防和漏洞挖掘等相关疑惑的讨论学习，想做一名正义的白帽子维护网络安全。</p>

  <p class="positioned demo">从上面的技术栈中, 切实的体会到自己的知识匮乏, 我朝着技术狂热者前进，在漏洞挖掘、系统安全运维以及开发方面不断学习实践,
    其中有血与泪同时也从中收获满满，并找到人生的价值方向，我坚信编程会改变世界、改变我的一生;</p>

  <p class="positioned">欢迎来访我的博客站点, 一起成长/学习/交流/进步, 梦想成为全栈的Boys Or Mans！欢迎各位大佬在的文章中指正我的错误，非常感谢 (๑′ᴗ‵๑) ❤、蟹蟹٩(‘ω’)و。 </p>

  <p class="positioned">博客站点: <a href="https://blog.weiyigeek.top" target="_blank">https://blog.weiyigeek.top</a></p>

  <div class="card">
    <span>作者公众号</span> <br>
    <a href="https://blog.weiyigeek.top" target="_blank">
      <img src="https://blog.weiyigeek.top/img/wechat-gzh.jpg" style=" height: 120px; width: 120px;" alt="wechat-gzh" srcset="" />
    </a>
  </div>
</body>
</html>